"use client"

import { useState, useEffect } from "react"
import { CourseSidebar } from "../components/CourseSidebar"
import { MainContent } from "../components/MainContent"
import { AISidebar } from "../components/AISidebar"
import { GlobalLogo } from "../components/GlobalLogo"

interface Course {
  lesson_number: string
  course_name: string
  target_char: string
}

export default function Home() {
  const [currentSection, setCurrentSection] = useState(0)
  const [currentLesson, setCurrentLesson] = useState(1)
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const [currentCourseNumber, setCurrentCourseNumber] = useState('001')
  const [courseList, setCourseList] = useState<Course[]>([])
  const [selectedContent, setSelectedContent] = useState('hanzi')
  const [showWelcome, setShowWelcome] = useState(true)
  const [activeTab, setActiveTab] = useState('首页')

  // 页面加载时获取课程列表
  useEffect(() => {
    loadCourseList()
  }, [])

  // 加载课程列表
  const loadCourseList = async () => {
    try {
      // 生成380节课程数据
      const mockCourses: Course[] = []
      
      // 常用汉字列表
      const commonChars = [
        '木', '水', '火', '土', '金', '人', '口', '手', '心', '日',
        '月', '山', '石', '田', '白', '目', '耳', '鸟', '鱼', '马',
        '牛', '羊', '犬', '豕', '虫', '贝', '见', '角', '言', '谷',
        '豆', '麦', '黍', '黑', '青', '赤', '黄', '白', '玄', '立',
        '行', '衣', '西', '页', '风', '飞', '食', '首', '香', '音',
        '大', '小', '上', '下', '左', '右', '中', '内', '外', '前',
        '后', '东', '南', '西', '北', '来', '去', '出', '入', '开',
        '关', '高', '低', '长', '短', '新', '旧', '好', '坏', '多',
        '少', '远', '近', '快', '慢', '早', '晚', '今', '明', '昨'
      ]
      
      // 课程主题类型
      const courseTypes = [
        '认识', '学习', '掌握', '理解', '练习', '复习', '巩固', '拓展'
      ]
      
      for (let i = 1; i <= 380; i++) {
        const lessonNumber = i.toString().padStart(3, '0')
        const char = commonChars[(i - 1) % commonChars.length]
        const courseType = courseTypes[(i - 1) % courseTypes.length]
        
        mockCourses.push({
          lesson_number: lessonNumber,
          course_name: `第${i}课：${courseType}${char}字`,
          target_char: char
        })
      }
      
      setCourseList(mockCourses)
    } catch (error) {
      console.error('加载课程列表失败:', error)
    }
  }

  // 选择课程
  const selectCourse = (courseNumber: string) => {
    setCurrentCourseNumber(courseNumber)
    const course = courseList.find((c) => c.lesson_number === courseNumber)
    if (course) {
      // 可以在这里更新其他相关状态
    }
  }

  // 切换侧边栏
  const toggleSidebar = () => {
    setSidebarCollapsed(!sidebarCollapsed)
  }

  // 开始教学
  const startTeaching = () => {
    setShowWelcome(false)
    setCurrentSection(1) // 切换到字根学习
    setSelectedContent('hanzi')
  }

  // 切换板块
  const switchSection = (section: number) => {
    setCurrentSection(section)
  }

  // 选择内容类型
  const selectContent = (type: string) => {
    setSelectedContent(type)
  }

  // 处理activeTab变化
  const handleActiveTabChange = (tab: string) => {
    setActiveTab(tab)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-400 via-purple-500 to-purple-600 relative overflow-hidden">
      {/* 动态背景装饰 */}
      <div className="absolute inset-0 opacity-30">
        <div className="absolute w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse top-20 left-20"></div>
        <div className="absolute w-64 h-64 bg-white/10 rounded-full blur-3xl animate-pulse bottom-20 right-20"></div>
        <div className="absolute w-48 h-48 bg-white/10 rounded-full blur-3xl animate-pulse top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
      </div>



      {/* 主布局 */}
      <div className="flex h-screen relative z-10">
        {/* 左侧课表 */}
        <CourseSidebar
          collapsed={sidebarCollapsed}
          onToggle={toggleSidebar}
          courseList={courseList}
          currentCourseNumber={currentCourseNumber}
          onSelectCourse={selectCourse}
        />

        {/* 中间主区域 */}
        <MainContent
          currentSection={currentSection}
          onSwitchSection={switchSection}
          selectedContent={selectedContent}
          onSelectContent={selectContent}
          showWelcome={showWelcome}
          onStartTeaching={startTeaching}
          currentCourseNumber={currentCourseNumber}
          courseList={courseList}
          onActiveTabChange={handleActiveTabChange}
        />

        {/* 右侧AI讲稿区 */}
        <AISidebar
          currentSection={currentSection}
          currentCourseNumber={currentCourseNumber}
        />
      </div>
    </div>
  )
}
